<template>
  <view :style="colorStyle">
    <view class="infobox1 cfff">
      <view class="block1 f24"> 我的积分 </view>
      <view class="block2">
        {{ info.integral }}
      </view>
    </view>
    <view class="tabbox">
      <tabs :list="tablist" :fixed="false" @tablistChange="tablistChange" />
    </view>
    <view class="infobox2">
      <view class="list" v-for="(item, index, key) in list" :key="key">
        <view class="block1 flex between">
          <view class="info1 c1F1F1F f28 ellipsis2">
            {{ item.remark }}
          </view>
          <view class="info2 themeColor f32" v-if="item.type == 1">
            +{{ item.amount }}
          </view>
          <view class="info2 cF65B49 f32" v-if="item.type == 2">
            -{{ item.amount }}
          </view>
        </view>
        <view class="block2 c858585 f24">
          创建时间：{{ item.createTime }}
        </view>
        <!-- <view class="block3 c858585 f24">
					结算时间：2023-06-23
				</view> -->
      </view>
    </view>

    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { userWalletPage, userinfo } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken } from "../../utils/storage";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      tablist: [
        {
          name: "积分获取明细",
          type: 1,
        },
        {
          name: "积分消耗明细",
          type: 2,
        },
      ],
      tablistindex: 0,
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
      info: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      this.userWalletPage();
      this.userinfo();
    }
  },
  methods: {
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.hideLoading();
    },
    async userWalletPage() {
      loading();
      let { data } = await userWalletPage({
        current: this.current,
        size: 10,
        amountType: 2,
        type: this.tablist[this.tablistindex].type,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.userWalletPage();
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.userWalletPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.userWalletPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  margin: 30rpx 30rpx 0;
  border-radius: 28rpx;
  background: linear-gradient(
    101deg,
    var(--view-op-ten6) 5.79%,
    var(--view-theme) 92.75%
  );
  padding: 44rpx 28rpx;

  .block1 {
  }

  .block2 {
    margin: 16rpx 0 0;
    font-size: 72rpx;
  }
}

.tabbox {
  background: #fff;
  padding: 30rpx 0 20rpx 0;
}

.infobox2 {
  margin: 30rpx 30rpx 0;

  .list {
    background: #fff;
    border-radius: 28rpx;
    padding: 32rpx 24rpx;
    margin: 0 0 30rpx 0;

    .block1 {
      .info1 {
        width: 500rpx;
      }
    }

    .block2 {
      margin: 16rpx 0;
    }
  }
}
</style>
